import china_map from '@/assets/server/china_map.jpeg'
import line from '@/assets/server/line.png'
import ningx from '@/assets/server/ningx.png'
import tag from '@/assets/server/tag.png'
import { defineComponent, Transition } from 'vue'
export default defineComponent({
  setup(props, { emit }) {
    return () => (
      <Transition
        enterFromClass='transform scale-0'
        enterActiveClass='transition-all ease-in-out duration-800'
        enterToClass='transform scale-100'
        leaveActiveClass='transition-all ease-in-out duration-800'
        appear
      >
        <div
          class='relative w-full h-full'
          style={`background:url(${china_map});background-size: 100% 100%;`}
        >
          <div
            class='absolute left-53/100 bottom-65/100 w-23vw h-31vh'
            style={`background:url(${tag});background-size:100% 100%`}
          >
            <span class='block mt-1.8vh text-lg text-center text-fonts-400'>
              宁夏回族自治区
            </span>
            <img src={line} alt='' class='w-21.5vw ml-0.9vw' />
            <div class='flex ml-1.2vw'>
              <img src={ningx} alt='' class=' w-12.5vw h-9.8vh' />
              <div
                class='flex items-center justify-center flex-shrink-0 ml-1.25vw text-3xl 2xl:text-4xl rounded-md w-6vw h-9.8vh'
                style='background:#dfecfd'
                onClick={() => {
                  emit('currentStep', 0)
                }}
                data-cy='submit'
              >
                进入
                <br />
                宁夏
              </div>
            </div>
          </div>
        </div>
      </Transition>
    )
  },
})
